<template>
    <nut-cell>
        <template #title>
            <section class="liaison">
                <nut-avatar icon="my" shape="square"></nut-avatar>
                <section class="name">{{liaisonName}}</section>
            </section>
        </template>

        <template #link>
            <section class="right-bar">
                <nut-tag type="success" v-if="store.state.videoCall.localPeer.id===props.remotePeerId">我</nut-tag>
                <nut-button v-else @click="goToVideoCallPage" type="info" size="mini">视频通话</nut-button>
            </section>
        </template>
    </nut-cell>
</template>

<script setup>
import { useRouter } from "vue-router";
import { computed, defineProps } from "vue";
import { useStore } from "vuex";

const store = useStore();
const router = useRouter();

const props = defineProps({
    name: {
        type: String,
        required: true
    },
    remotePeerId: {
        type: String,
        required: true
    }
});

const liaisonName = computed(() => props.name.length > 20 ? props.name.substring(0, 21).concat("...") : props.name);

function goToVideoCallPage() {
    router.push({
        path: "/video-call-page", query: {
            videoCallType: store.state.videoCall.typeEnumeration.call,
            remotePeerId: props.remotePeerId
        }
    });
}

</script>

<style lang="scss" scoped>
.liaison {
    width: 100%;
    display: flex;
    align-items: center;

    .name {
        margin-left: .625rem;
        font-weight: bold;
    }

}

.right-bar {
    display: flex;
    align-items: center;
}
</style>